<script setup>
/**
 * 通知列表页面
 *
 * 功能：
 * 1. 显示通知列表（分页）
 * 2. 区分重要和普通通知（重要通知有特殊标记）
 * 3. 点击通知跳转到详情页
 */
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Bell, Document } from '@element-plus/icons-vue';
// import AppSidebar from '@/components/common/AppSidebar.vue';
import { fetchNoticeList } from '@/api/notice';

// 路由实例（用于页面跳转）
const router = useRouter();

// 响应式数据
const loading = ref(false); // 加载状态
const fullNoticeList = ref([]); // 全量通知列表
const noticeList = ref([]); // 当前页通知列表
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页数量
const total = ref(0); // 总记录数

// 从 localStorage 获取登录用户信息
const getEnterpriseInfo = () => {
    try {
        const enterpriseInfoStr = localStorage.getItem('enterpriseInfo');
        if (enterpriseInfoStr) {
            const info = JSON.parse(enterpriseInfoStr);
            console.log('📋 从 localStorage 读取到的企业信息:', info);
            return info;
        } else {
            console.warn('⚠️ localStorage 中没有 enterpriseInfo');
        }
    } catch (error) {
        console.error('❌ 获取企业信息失败:', error);
    }
    return null;
};

const enterpriseInfo = getEnterpriseInfo();
const enterpriseId = ref(enterpriseInfo?.enterpriseId || 'ENTERPRISE_001'); // 从登录信息获取
const username = ref(localStorage.getItem('username') || 'test_user'); // 从 localStorage 单独读取

// 调试信息：打印实际使用的企业ID
console.log('🔑 当前使用的企业ID:', enterpriseId.value);
console.log('👤 当前使用的用户名:', username.value);
console.log('Token:', localStorage.getItem('token'));
console.log('Username:', localStorage.getItem('username'));
console.log('EnterpriseInfo:', localStorage.getItem('enterpriseInfo'));

/**
 *
 * 为什么要用 async/await？
 * - 网络请求是异步的，需要等待服务器响应
 * - async/await 让异步代码看起来像同步代码，更易读
 */
const sliceToCurrentPage = () => {
    const start = (currentPage.value - 1) * pageSize.value;
    noticeList.value = fullNoticeList.value.slice(start, start + pageSize.value);
};

const loadNoticeList = async () => {
    loading.value = true; // 显示加载动画

    try {
        // 调用 API 获取数据
        console.log('🌐 正在请求通知列表，参数:', {
            page_no: currentPage.value,
            page_size: pageSize.value,
            enterprise_id: enterpriseId.value,
        });

        const firstPage = await fetchNoticeList({
            page_no: currentPage.value,
            page_size: pageSize.value,
            enterprise_id: enterpriseId.value,
        });

        console.log('✅ API 返回数据:', firstPage);
        console.log('📝 通知数量:', firstPage?.list?.length || 0);

        const serverPageSize = Number(firstPage?.pageSize) || pageSize.value;
        const apiTotal = Number(firstPage?.totalCount) || 0;
        const pageTotal =
            Number(firstPage?.pageTotal) ||
            (apiTotal > 0 ? Math.ceil(apiTotal / serverPageSize) : 1);

        let allNotices = Array.isArray(firstPage?.list) ? [...firstPage.list] : [];

        // 拉取后续页并合并，避免后端分页导致缺失
        if (pageTotal > 1) {
            const tasks = [];
            for (let page = 2; page <= pageTotal; page++) {
                tasks.push(
                    fetchNoticeList({
                        page_no: page,
                        page_size: serverPageSize,
                        enterprise_id: enterpriseId.value,
                    }),
                );
            }

            const results = await Promise.allSettled(tasks);
            results.forEach((res) => {
                if (res.status === 'fulfilled' && Array.isArray(res.value?.list)) {
                    allNotices = allNotices.concat(res.value.list);
                }
            });
        }

        // 按发布时间倒序兜底排序
        allNotices.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime));

        fullNoticeList.value = allNotices;
        total.value = allNotices.length;
        currentPage.value = 1; // 重置到第一页
        sliceToCurrentPage();

        if (fullNoticeList.value.length === 0) {
            console.warn('⚠️ 通知列表为空');
        }
    } catch (error) {
        // 出错时显示错误提示
        console.error('❌ 加载通知列表失败:', error);
        ElMessage.error(error?.message || '加载通知列表失败');
        // 确保出错时清空列表
        fullNoticeList.value = [];
        noticeList.value = [];
        total.value = 0;
    } finally {
        // 无论成功还是失败，都要隐藏加载动画
        loading.value = false;
    }
};

/**
 * 跳转到通知详情页
 *
 * @param notice 通知对象
 */
const handleViewNotice = (notice) => {
    router.push({
        name: 'notice-detail',
        params: {
            id: notice.noticeId,
        },
    });
};

/**
 * 页码改变时的处理
 *
 * 为什么需要这个函数？
 * - 用户点击分页按钮时，Element Plus 会调用这个函数
 * - 我们需要更新当前页码，然后重新加载数据
 */
const handlePageChange = (page) => {
    currentPage.value = page;
    sliceToCurrentPage();
};

/**
 * 格式化日期显示
 *
 * 为什么要格式化？
 * - 服务器返回的日期是字符串，不够友好
 * - 转换成"2025年10月25日 14:30"这样的格式更易读
 */
const formatDate = (dateStr) => {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
    });
};

/**
 * 组件挂载时自动加载数据
 *
 * 为什么用 onMounted？
 * - 页面加载完成后自动获取数据
 * - 用户打开页面就能看到通知列表
 */
onMounted(() => {
    loadNoticeList();
});
</script>

<template>
    <div class="notice-list">
        <!-- 左侧导航栏 -->
        <!-- <AppSidebar /> -->

        <!-- 右侧主内容 -->
        <el-main class="main-content">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="header-left">
                    <!-- <el-icon class="header-icon">
                        <Bell />
                    </el-icon> -->
                    <div>
                        <h1 class="page-title">通知中心</h1>
                        <p class="page-description">查看系统通知和重要公告</p>
                    </div>
                </div>
            </div>

            <!-- 通知列表卡片 -->
            <el-card class="list-card" v-loading="loading">
                <!-- 空状态 -->
                <el-empty v-if="!loading && noticeList.length === 0" description="暂无通知">
                </el-empty>

                <!-- 通知列表 -->
                <div class="notice-items" v-else>
                    <div
                        v-for="notice in noticeList"
                        :key="notice.noticeId"
                        class="notice-item"
                        :class="{ important: notice.isImportant === 1 }"
                        @click="handleViewNotice(notice)"
                    >
                        <!-- 左侧图标 -->
                        <div class="item-icon">
                            <el-icon v-if="notice.isImportant === 1" class="important-icon">
                                <Bell />
                            </el-icon>
                            <el-icon v-else class="normal-icon">
                                <Document />
                            </el-icon>
                        </div>

                        <!-- 中间内容 -->
                        <div class="item-content">
                            <div class="item-title">
                                <!-- 重要通知有个红色标签 -->
                                <el-tag
                                    v-if="notice.isImportant === 1"
                                    type="danger"
                                    size="small"
                                    effect="dark"
                                >
                                    重要
                                </el-tag>
                                <span>{{ notice.title }}</span>
                            </div>
                            <div class="item-meta">
                                <span class="meta-item">
                                    <el-icon>
                                        <Document />
                                    </el-icon>
                                    发布人：{{ notice.publisher }}
                                </span>
                                <span class="meta-item">
                                    发布时间：{{ formatDate(notice.publishTime) }}
                                </span>
                            </div>
                        </div>

                        <!-- 右侧箭头 -->
                        <div class="item-action">
                            <el-icon><el-icon-arrow-right /></el-icon>
                        </div>
                    </div>
                </div>

                <!-- 分页组件 -->
                <!-- 
          为什么需要分页？
          - 通知可能有很多条，一页显示不完
          - 分页可以让用户翻页查看
          
          参数说明：
          - v-model:current-page: 当前页码（双向绑定）
          - page-size: 每页数量
          - total: 总记录数
          - @current-change: 页码改变时触发
        -->
                <el-pagination
                    v-if="total > pageSize"
                    v-model:current-page="currentPage"
                    :page-size="pageSize"
                    :total="total"
                    layout="prev, pager, next, total"
                    @current-change="handlePageChange"
                    class="pagination"
                />
            </el-card>
        </el-main>
    </div>
</template>

<style scoped lang="scss">
.notice-list {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

.main-content {
    flex: 1;
    padding: 32px;
}

/* 页面头部样式 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 40px;
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    border-radius: 24px;
    color: white;
    box-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.3);
}

/* 列表卡片 */
.list-card {
    min-height: 400px;
}

/* 通知列表项 */
.notice-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notice-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        border-color: #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        transform: translateX(4px);
    }

    /* 重要通知有特殊样式 */
    &.important {
        border-left: 4px solid #ef4444;
        background: #fef2f2;
    }
}

.item-icon {
    margin-right: 16px;

    .important-icon {
        font-size: 32px;
        color: #ef4444;
    }

    .normal-icon {
        font-size: 32px;
        color: #667eea;
    }
}

.item-content {
    flex: 1;
}

.item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.item-meta {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: #6b7280;

    .meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }
}

.item-action {
    color: #9ca3af;
    font-size: 20px;
}

/* 分页样式 */
.pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
</style>
